<template>
  <div class="app-container">
    <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input>
    <el-button
      type="text"
      @click="
        dialogVisible = true;
        subject.parentId = '0';
      "
      >添加一级分类</el-button
    >
    <el-tree
      class="filter-tree"
      :data="subjectList"
      :props="defaultProps"
      default-expand-all
      :filter-node-method="filterNode"
      :expand-on-click-node="false"
      ref="tree"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            v-if="node.level == 1"
            type="text"
            size="mini"
            @click="
              dialogVisible = true;
              subject.parentId = data.id;
            "
          >
            添加
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => deleteSubject(node, data)"
          >
            删除
          </el-button>
        </span>
      </span>
    </el-tree>
    <el-dialog title="添加分类" :visible.sync="dialogVisible">
      <el-form :model="subject">
        <el-form-item label="分类标签">
          <el-input v-model="subject.title" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSubject">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import subjectApi from "@/api/subject";
export default {
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },

  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1;
    },
    //添加课程分类
    addSubject() {
      console.log(this.subject);
      //调用添加课程分类的API
      subjectApi.addSubject(this.subject).then((res) => {
        // 提示成功信息
        this.$message({
          type: "success",
          message: "添加成功!",
        });
        //关闭添加课程分类对话版
        this.dialogVisible = false;
        //重新进入课程分类列表
        this.init();
        //成功后将文本框清空
        this.subject.title = "";
      });
    },
    init() {
      // 获取课程分类信息列表
      subjectApi
        .getList()
        .then((res) => {
          // console.log(res);
          this.subjectList = res.data;
          console.log(this.subjectList);
          console.log(res);
        })
        .catch((err) => {
          this.$message({
            type: "error",
            message: "获取数据失败",
          });
        });
    },
    //删除课程分类
    deleteSubject(node, data) {
      // console.log(data,node);
      //询问是否要删除
      this.$confirm("您确定删除该课程吗", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //调用删除课程API
          subjectApi
            .deleteSubject(data.id)
            .then((res) => {
              if (res.succeeded) {
                //删除提示成功信息
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                //重新加载课程分类数据
                this.init();
              }
            })
            .catch((err) => {
              this.$message({
                type: "error",
                message: "删除失败",
              });
            });
        })
        .catch(() => {});
    },
  },

  data() {
    return {
      subject: {
        parentId: "0",
      }, //课程分类对象
      dialogVisible: false, //是否显示对话框
      filterText: "",
      subjectList: [],
      defaultProps: {
        children: "children", //子节点显示所对应的属性名
        label: "title", //节点显示的文本所对应的属性名
      },
    };
  },
  created() {
    // 获取课程分类信息列表
    this.init();
  },
};
</script>